<template>
  <div class="login-wrapper">
    <div class="login-form">
      <div class="login-header">
        <p>登录</p>
      </div>

      <el-input
        placeholder="请输入用户名"
        suffix-icon="fas el-icon-fa-search"
        v-model="userNmae"
        style="margin-bottom: 18px"
      >
      </el-input>

      <el-input
        placeholder="请输入密码"
        suffix-icon="fas fa-keyboard-o"
        v-model="password"
        type="password"
        style="margin-bottom: 18px"
        @keyup.native.enter="login"
      >
      </el-input>

      <el-button
        type="primary" :loading="loginLoading"
        style="width: 100%;margin-bottom: 18px"
        @click.native="login"
      >登录
      </el-button>
      <div>
        <el-checkbox v-model="Remenber"> Remenber</el-checkbox>
        <a href="javascript:;" style="float: right;color: #3C8DBC;font-size: 14px">Register</a>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      userNmae: '',
      password: '',
      Remenber: true,
      loginLoading: false
    }
  },
  methods: {
    login () {
      this.loginLoading = true
      // loginApi({userNmae:this.userNmae,password:this.password}).then(r=>{}).catch(_=>{})
      setTimeout(() => {
        // setToken('123456789');
        this.$notify({
          title: '登录成功',
          message: '很高兴你使用ElementUIAdmin！别忘了给个Star哦。',
          type: 'success'
        })
        this.loginLoading = false
        this.$router.push({path: '/'})
      }, 1000)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .login-wrapper
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 100%;
    width: 100%;
    background: lightblue;
    .login-form
      width: 375px;
      height: 250px;
      padding: 30px;
      background-color: white;
      text-align: left;
      border-radius: 4px;
      position: relative;
      margin-left: 0;
      margin-right: 0;
      zoom: 1;
      display: block;
      .login-header
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 20px;

</style>
